
<template>
  <div style="overflow: auto">
    <el-card class="box-card" style="">
      <el-col :span="12"><div class="grid-content bg-purple">
        <el-card class="box-card" >
          <div slot="header" class="clearfix">
            <span>取图方式</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">新增取图方式</el-button>
          </div>
          <el-table
            :data="CameratableData"
            style="width: 100%"
            border
           >
            <el-table-column
              prop="name"
              label="名称"
              width="100">
            </el-table-column>
            <el-table-column
              prop="url"
              label="地址"
              width="150">
            </el-table-column>
            <el-table-column
              prop="screentype"
              label="取图类型"
              :show-overflow-tooltip="true"
              width="150">
            </el-table-column>
            <el-table-column
              prop="interval"
              label="取图间隔"
              :show-overflow-tooltip="true"
              width="150">
            </el-table-column>
            <el-table-column
            prop="total"
            label="取图数量"
            :show-overflow-tooltip="true"
            width="150">
          </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="180">
              <template slot-scope="scope">
<!--                <el-button  slot="reference" size="mini"  @click="start(scope.row)" style="margin-right: 10px">取 图</el-button>-->
                <el-button  slot="reference" size="mini"  @click="openDrawer(scope)" style="margin-right: 10px">启用 </el-button>
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="DeleteType(scope.row.id)"
                >

                  <el-button type="danger" slot="reference" size="mini">删 除</el-button>
                </el-popconfirm>
<!--              <el-button type="danger" icon="el-icon-delete" circle @click="DeleteType(scope.row.id)"></el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple">
        <el-card class="box-card" style="overflow: auto">
          <div slot="header" class="clearfix">
            <span>画面预览</span>

          </div>
          <div >
            <el-image
              style="width: 100%;height: auto"
              :src="picSrc"
             ></el-image>
          </div>

        </el-card>
      </div></el-col>
    </el-card>
    <el-dialog
      title="新增摄像机"
      width="30%"
      :visible.sync="dialogVisible"
     >
      <el-form label-position="left" label-width="80px" >
        <el-form-item label="名称">
          <el-input v-model="Info.name" ></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input  v-model="Info.url"></el-input>
        </el-form-item>
        <el-form-item label="取图方式">
          <el-input  v-model="Info.screentype"></el-input>
        </el-form-item>
        <el-form-item label="间隔">
          <el-input  v-model="Info.interval"></el-input>
        </el-form-item>
        <el-form-item label="取图数量">
          <el-input  v-model="Info.total"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button >取 消</el-button>
        <el-button @click="handleAdd">确 认</el-button>
      </span>
    </el-dialog>

    <el-drawer
      :modal="false"
      :wrapperClosable="false"
      :with-header="false"
      :visible.sync="opdialogVisible"
      direction="ltr"
      size="80%"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <el-card  style="background-color: #3c3f41; height: 100%;border: none;border-radius: 0;overflow: auto; ">
        <div slot="header" class="clearfix">
          <el-tag
            :key="tag.id"
            v-for="tag in dynamicTags"
            :effect="tag.id === selectid ? 'dark' : 'light'"
            :disable-transitions="false"
            @click="getOpListByType(tag)">
            {{tag.name}}
          </el-tag>
          <div style="float: right">
          <el-button style="background-color: black;border: none" @click="handleCloseDialog" >取消</el-button>
          <el-button style="background-color: black;border: none" @click="start" >确定</el-button>
        </div>
        </div>

        <el-row>
          <el-col :span="18">

            <el-card class="box-card" style="height: 1000px;overflow: auto">

              <el-table
                :data="opdata"
                style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">

                      <el-form-item label="算子内容">
                        <codemirror
                          v-model="props.row.content "
                          :options="cmOptions"
                        />
                      </el-form-item>

                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="算子名称"
                  prop="name"
                  width="200px"
                >
                </el-table-column>

                <el-table-column
                  label="算子描述"
                  prop="description">
                </el-table-column> <el-table-column
                label="更新时间"
                prop="update_datetime">
              </el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button size="mini" style="margin-left: 10px" @click="getParam(scope)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-card>>
          </el-col>
          <el-col :span="6">
            <el-timeline style="margin-left: 10px">
              <el-timeline-item :timestamp="(++index).toString()" v-for="(item,index) in opArr"  placement="top">
                <el-card>

                  <h4>{{item.name}}</h4>
                </el-card>
              </el-timeline-item>
            </el-timeline>

          </el-col>
        </el-row>
      </el-card>

    </el-drawer>

    <el-drawer
      :modal="false"
      :wrapperClosable="false"
      :with-header="false"
      :visible.sync="paramdialogVisible"
      direction="rtl"
      size="20%"
      custom-class="demo-drawer"
      ref="drawer"

    >
      <el-card  style="background-color: #3c3f41; height: 100%;border: none;border-radius: 0">
        <div slot="header" class="clearfix">
          <span style="color: white">
            参数设置
          </span>
          <div style="float: right">
            <el-button style="background-color: black;border: none" @click="handleChoose" >取消</el-button>
            <el-button  style="background-color: black;border: none" @click="handleChoosedOp">确定</el-button>
          </div>
        </div>

        <div style="margin-top: 20px;margin-left: -5px">
          <div class="mobile" v-for="(val,key) in params.parameters" style="margin-bottom: 10px">
            <!--            <div style="margin-left: 10px">{{key}}</div>-->
            <el-tag style="margin-left: 10px; display: block;width: 100px">{{key}}</el-tag>
            <el-input v-model="params.parameters[key]" placeholder="key" size="small" style="margin-left: 10px; width: 100px"></el-input>
          </div>
        </div>

      </el-card>

    </el-drawer>
  </div>
</template>

<script>
import { GetList, AddObj, DelObj } from './api'
import * as api from '@/views/basicoperator/opmanage/api'
export default {
  name: 'CameraManagement',
  data () {
    return {
      opArr: [],
      params: {},
      typeParams: {},
      choosedOp: [],
      opdata: [],
      dynamicTags: [],
      opdialogVisible: false,
      paramdialogVisible: false,
      dialogVisible: false,
      picSrc: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      CameratableData: [],
      Info: {
        name: '',
        url: '',
        screentype: 0,
        interval: 1,
        total: 1

      }
    }
  },
  created () {
    this.getTableData()
    this.pageRequest()
    this.getOpListByType(1)
  },
  mounted () {

  },
  beforeDestroy () {

  },
  methods: {
    handleChoosedOp () {
      this.paramdialogVisible = false
      const key = Object.keys(this.params.parameters)
      key.forEach(item => {
        this.params.parameters[item] = parseInt(this.params.parameters[item])
      })
      this.opArr.push(this.params)
    },
    getParam (e) {
      this.paramdialogVisible = true
      this.params = e.row
    },
    handleChoose (item) {
      this.paramdialogVisible = false
    },
    async getOpListByType (tag) {
      this.selectid = tag.id
      const res = await api.GetOpList({
        typeid: tag.id
      })
      if (res.code === 2000) {
        // this.$message.success(res.msg)
        this.opdata = res.data.data
        console.log(tag)
      } else {
        this.$message.error(res.msg)
      }
    },
    async pageRequest (query) {
      const res = await api.GetList(query)
      this.dynamicTags = res.data.data
      console.log(this.dynamicTags)
    },
    openDrawer (scope) {
      this.opArr = []
      this.typeParams = scope.row
      const that = this
      setTimeout(() => {
        that.opdialogVisible = true
      }, 100)
    },
    handleCloseDialog () {
      this.opdialogVisible = false
    },
    async DeleteType (id) {
      const res = await DelObj(id)
      if (res.code == 2000) {
        this.$message.success(res.msg)
        this.getTableData()
      } else {
        this.$message.error(res.msg)
      }
    },
    async handleAdd () {
      const res = await AddObj(this.Info)
      if (res.code == 2000) {
        this.$message.success(res.msg)
        this.dialogVisible = false
        this.getTableData()
      } else {
        this.$message.error(res.msg)
      }
    },
    async getTableData () {
      const res = await GetList()
      console.log(res)
      if (res.code === 2000) {
        this.CameratableData = res.data.data
      } else {
        this.$message.error(res.msg)
      }
    },

    async start () {
      // console.log(this.opArr)
      // console.log(this.typeParams)
      this.opdialogVisible = false
      this.picSrc = `http://127.0.0.1:8000/datasource/video/?params=${JSON.stringify(this.typeParams)}&op=${JSON.stringify(this.opArr)}`
    }
  }
}
</script>
<style  scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

</style>
